<template>
	<view class="out-box">
		<view class="carousel">
			<!-- goodsData：轮播图数据  @setShowVideo：视频按钮点击事件 -->
			<cc-videoSwiper :goodsData="goodsData" @setShowVideo="setShowVideo"></cc-videoSwiper>
				<!-- 预览视频弹窗 -->
				<view class="mask" v-if="showVideo" @touchmove.stop.prevent="ondefault" @click="hideShow">
					<view class="close">
						<image src="../../static/images/close.png"></image>
					</view>
				</view>
				<view class="previewvideo" v-if="showVideo">
					<view class="videos">
						<video class="nowvideos" id="nowVideo" v-if="showVideo" :src="goodsData.videos"
							:autoplay="showVideo" :show-center-play-btn="true" :show-mute-btn="true"
							:show-fullscreen-btn="false"></video>
					</view>
				</view>
				<!-- 用来承载H5预览视频的 -->
				<view style="position: absolute;top: -999rpx;left: -999rpx;">
					<video id="newVideo" ref="newVideo" :src="goodsData.videos" :autoplay="showVideo"
						:show-center-play-btn="false" :show-mute-btn="true" :show-fullscreen-btn="false"
						@fullscreenchange="hideShow"></video>
				</view>
		</view>
		<view class="header">
			<view class="header_title"><span v-if="lists.result.is_swerve == 1" class="span1">(急转)</span>{{ lists.result.title }}</view>
			<view class="header_money">{{(lists.result.rent == null ||lists.result.rent == 0)? '面议':  '￥' +  lists.result.rent }}
				<span v-if="lists.result.rent != null && lists.result.rent != 0" class="span2">元/月</span>
			</view>
			<!-- <view v-if="lists.result.feature_label" class="header_label">
				<view v-for="item1,index1 in lists.result.feature_label.split(',')" :key="index1">
					<view class="label_item">{{ item1}}</view>
				</view>
			</view> -->
			<view v-if="lists.result.feature_label && lists.result.feature_label!='null' " class="item_right_identifying">
				<view class="item_right_identifying_item" v-for="item1,index1 in lists.result.feature_label.split(',')" :key="index1">
					<view >{{ item1}}</view>
				</view>
			</view>
			<view class="header_information">
				<view class="information_item">
					<view class="item_top">{{  lists.result.shop_area}}m²</view>
					<view class="item_bottom">使用面积</view>
				</view>
				<view class="information_item">
					<view class="item_top">{{lists.result.is_swerve == 1 ?'是':'否' }}</view>
					<view class="item_bottom">是否急租</view>
				</view>
				<view class="information_item">
					<view class="item_top">{{(lists.result.transfer_fee == null || lists.result.transfer_fee == 'null' || lists.result.transfer_fee == "") ?'面议':  lists.result.transfer_fee }}</view>
					<view class="item_bottom">转让费</view>
				</view>
				<!-- <view class="information_hr"></view> -->
				<view class="information_item">
					<view class="item_top">{{lists.result.shop_type == null ?'面议':  lists.result.shop_type }}</view>
					<view class="item_bottom">店铺类型</view>
				</view>
				<!-- <view class="information_hr"></view> -->
			</view>
			<view class="header_user">
				<view class="user_dotu">
					<view class="user_itemone">地址：
						<span class="span2">{{ lists.result.province +'-'+ lists.result.city +'-' + lists.result.county}}</span>
					</view>
					<!-- <view class="user_icon" @tap="todutu()">
						<image class="icon_img" src="../../static/images/正在定位.png"></image>
						<view class="icon_text">查看地图</view>
					</view> -->
				</view>
				<view class="information_hr"></view>
				<view class="user_item">联系人：<span class="span2">{{ lists.result.name }}</span></view>
				<view class="user_item">联系电话：<span class="span2">{{ lists.result.phone }}</span></view>
				<view class="information_hr"></view>
				<view class="user_dotuone">
					<view class="user_itemtwo">店铺详情：</view>
					<view class="span2" v-html="lists.result.detailed_introduction"></view>
				</view>
				<view class="information_hr"></view>
				<view class="user_item">更新时间：<span class="span2">{{ lists.result.update_time !=null? lists.result.update_time :lists.result.create_time}}</span></view>
			</view>

			<view class="visits_title">
				<view class="visits_title_left"></view>
				<view class="visits_title_right">店铺转让信息</view>
			</view>
			<!-- 下方的曝光量 -->
			<view class="visits">
				<view class="information_item">
					<view class="item_top">{{lists.result.visits_count}}</view>
					<view class="item_bottom">访问量</view>
				</view>
				<view class="information_item">
					<view class="item_top">{{  lists.result.exposure_count}}</view>
					<view class="item_bottom">曝光量</view>
				</view>
				<view class="information_item">
					<view class="item_top">{{lists.result.get_phone_count}}</view>
					<view class="item_bottom">电话查看</view>
				</view>
			</view>
			<view class="header_warn">联系我时，请一定说明是“铺铺转”看到的</view>
		</view>
		<view class="mian">声明：本信息来自客户提供，如有侵权，请联系平台删除</view>
		<view class="bottom">
			<view class="bottom_main">
				<view class="mian_left" @tap="toindex()">
					<view class="left_top"></view>
					<view class="left_bottom">首页</view>
				</view>
				<view class="main_center" @tap="oncollect()">
					<view :class="lists.result.is_collect == true ?'center_top center_topclick':'center_top'"></view>
					<view class="center_bottom">收藏</view>
				</view>
				<view class="main_right" @tap="toipone()">
					<i class="right_i"><uni-icons type="phone" color="#fff" size="22"></uni-icons></i>电话咨询
				</view>
			</view>
		</view>

	<!-- 填写基础信息弹框 -->
	<uni-popup ref="popup" :is-mask-click="false">
		<!-- <view class="popupipone">
			<image class="image" src="../../static/images/book.png"></image>
			<view class="popupipone_imgtwo" @tap="colse_popup()"></view>
			<view class="tk_one">
				<view class="title_one">查看更多转店出租信息</view>
				<view class="title_two">通过本平台发布转店、出租、找店信息，省时省力省时间，填写信息快速为您精准定向推荐匹配</view>
			</view>
			<view class="hr"></view>
			<view class="title_name">您想要转店还是找店？</view>
			<view class="radio">
				<view :class="tan_value == 1? 'radio_item active':'radio_item'" @tap="tannn(1)">
					<view class="item_left">
						<view class="text_top">我要转店</view>
						<view class='text_bottom'>转让、出租信息匹配</view>
					</view>
					<view class="item_right" style="background: url(../../static/images/zd.png)no-repeat;background-size: 100% 100%;"></view>
				</view>
				<view :class="tan_value == 2? 'radio_item active':'radio_item'" @tap="tannn(2)">
					<view class="item_left">
						<view class="text_top">我要找店</view>
						<view class='text_bottom'>精准匹配合适的店铺</view>
					</view>
					<view class="item_right" style="background: url(../../static/images/cz.png)no-repeat;background-size: 100% 100%;"></view>
				</view>
			</view>
			<view class="title_name">填写联系人</view>
			<input class="input_one" placeholder-style="font-size:30rpx;" placeholder="请填写联系人名称" v-model="user.name"/>
			<view class="title_name">您的联系电话</view>
			<view class="getphone">
				<input class="input_twoo" placeholder-style="font-size:30rpx;" placeholder="请填写联系电话" v-model="user.phone"/>
				<button class="logon" open-type="getPhoneNumber" v-show="user.phone==''" @getphonenumber="getPhoneNumber">获取手机号</button>
			</view>
			<view class="title_name">您店铺所在的区域是？</view>
			<view class="region">
				<view class="address_i"></view>
				<view class="Address-item">
					<picker mode="multiSelector" :value="multiIndex"
						:range="newAddressList" range-key="label"
						@change="pickerChange" @cancel="pickerCancel"
						@columnchange="pickerColumnchange">
						<view class="uni-input">{{addressList.join('-')}}</view>
					</picker>
				</view>
				<view class="address_ii"></view>
			</view>
			<view class="tijiao" @tap="toform">下一步</view>
		</view> -->
		<view class="popupbase">
			<image class="icon" src="../../static/images/dunpai.png"></image>
			<view class="cha" @tap="colse_popup"></view>
			<view class="tit1">
				<view class="titone">{{ user.viptit }}</view>
				<view class="tittwo">会员可享更多权益</view>
			</view>
			<view class="quanyi">
					<view class="item">
						<view class="icon_bag">
							<image class="icon" src="../../static/images/z1.png"></image>
						</view>
						<view class="bigtit">转店查看</view>
						<!-- <view class="tit">每天30次</view> -->
					</view>
					<view class="item">
						<view class="icon_bag">
							<image class="icon" src="../../static/images/q2.png"></image>
						</view>
						<view class="bigtit">出租查看</view>
						<!-- <view class="tit">每天30次</view> -->
					</view>
					<view class="item">
						<view class="icon_bag">
							<image class="icon" src="../../static/images/q3.png"></image>
						</view>
						<view class="bigtit">电话查看</view>
						<!-- <view class="tit">每天30次</view> -->
					</view>
					<view class="item">
						<view class="icon_bag">
							<image class="icon" src="../../static/images/q52.png"></image>
						</view>
						<view class="bigtit">专属客服</view>
						<!-- <view class="tit">24小时在线咨询</view> -->
					</view>
			</view>
			<view class="buttom" @tap="toform">确认</view>
		</view>
	</uni-popup>
	<!-- 求租支付弹框 -->
	<uni-popup ref="paypopup" :is-mask-click="false">
		<view class="popuppay">
			<view class="popuppay_imgtwo" @tap="colse_paypopup()"></view>
			<view class="main_one">
				<view class="black"></view>
				<view class="black_tit">会员套餐</view>
			</view>
			<view class="check">
				<view v-for="(item,index) in product_value.required" :key="index">
					<view :class="product_value.default.id == item.id? 'item active' : 'item '" @tap="cpdefault(item)">
						<view class="tit">{{ item.product_name }}</view>
						<view class="money">{{ '￥' + item.now_money/100 }}</view>
						<view class="jiaobiao" v-if="product_value.default.id == item.id" ></view>
					</view>
				</view>
			</view>
			<view class="main_one">
				<view class="black_tit">会员专属权益</view>
			</view>
			<view class="quanyi">
					<view class="item">
						<view class="icon_bag">
							<image class="icon" src="../../static/images/z1.png"></image>
						</view>
						<view class="bigtit">转店查看</view>
						<view class="tit">{{ product_value.dier.id == product_value.default.id?'无限次数':'每天30次' }}</view>
					</view>
					<view class="item">
						<view class="icon_bag">
							<image class="icon" src="../../static/images/q2.png"></image>
						</view>
						<view class="bigtit">出租查看</view>
						<view class="tit">{{ product_value.dier.id == product_value.default.id?'无限次数':'每天30次' }}</view>
					</view>
					<view class="item">
						<view class="icon_bag">
							<image class="icon" src="../../static/images/q3.png"></image>
						</view>
						<view class="bigtit">电话查看</view>
						<view class="tit">{{ product_value.dier.id == product_value.default.id?'无限次数':'每天30次' }}</view>
					</view>
					<view class="item">
						<view class="icon_bag">
							<image class="icon" src="../../static/images/q5.png"></image>
						</view>
						<view class="bigtit">微信添加</view>
						<view class="tit">{{ product_value.dier.id == product_value.default.id?'无限次数':'每天30次' }}</view>
					</view>
					<view class="item" v-if="product_value.dier.id == product_value.default.id">
						<view class="icon_bag">
							<image class="icon" src="../../static/images/q52.png"></image>
						</view>
						<view class="bigtit">专属客服</view>
						<view class="tit">24小时在线咨询</view>
					</view>
					<view class="item" v-if="product_value.dier.id == product_value.default.id">
						<view class="icon_bag">
							<image class="icon" src="../../static/images/q6.png"></image>
						</view>
						<view class="bigtit">精准匹配</view>
						<view class="tit">系统精准推荐</view>
					</view>
					<view class="item" v-if="product_value.dier.id == product_value.default.id">
						<view class="icon_bag">
							<image class="icon" src="../../static/images/q7.png"></image>
						</view>
						<view class="bigtit">发布置顶</view>
						<view class="tit">全平台15天置顶</view>
					</view>
			</view>
			<view class="bottom">
				<view class="bottom_one"> {{'实际支付金额￥' + product_value.allmoney/100 }}</view>
				<view class="bottom_two" @tap="pay_qz">立即购买</view>
			</view>
		</view>
	</uni-popup>


	<!-- 普通弹窗 -->
	<!-- <uni-popup ref="popup_ipone" :is-mask-click="false" v-if=" product_lists" :safe-area="false">
		<view class="popupipone_center">
			<view class="porop_tit">
				<view class="porop_tit_left">店铺转让、出租推广展示，提升成交曝光</view>
				<view class="porop_tit_right" @tap="colse_popup_ipone()"></view>
			</view>
			<view class="prop_center">
				<view class="prop_center_top">
					<view class="center_top">
						<view class="center_left">{{ product_value.first.product_name}}</view>
						<view class="center_right">{{ product_value.first.now_money/100}}<span class="spanone">元</span></view>
					</view>
					<view class="center_butt">
						<view class="butt_left" v-for="item,index in product_value.first.vip_text" :key="index">
							<span class="butt_left_text">{{ item}}</span>
						</view>
						<view class="butt_right"><uni-icons type="checkbox-filled" color="rgba(255, 87, 51, 1)" size="30"></uni-icons> </view>
					</view>
				</view>
			</view>
			<view class="prop_bottom">
				<view class="buttom_btn" @tap="pay_throttle()">立即推广展示</view>
			</view>
		</view>
	</uni-popup> -->
	</view>
</template>

<script setup>
import {ref,reactive, onMounted, onBeforeMount} from 'vue'
import areaData from '../../util/js/area-data1'
import {onGotApiData,addClick,onGotApi} from '../../util/api.js'
		// 定义ref
		let newVideo = ref(null) 
	// 从上个页面获取到参数
	const props = defineProps({
			id: String,
			is_myshop:Number,
		});
		const index_item = props.id

		// const index_item = JSON.parse(decodeURIComponent(props.obj))

	// 在组件渲染之前执行
	onBeforeMount(() => {
		console.log("从上个页面获取到参数11",props)
		user.is_myshop = props.is_myshop || 0
		console.log('组件准备渲染',);
		user.user_id = uni.getStorageSync('user_id') || '';
		user.openid = uni.getStorageSync('open_id') ||'';
		user.channel_no = uni.getStorageSync('channel_no') ||'';
		user.phone = uni.getStorageSync('phone') ||'';
		console.log('user.openid',user.openid)

		// 初始化地区的数组
		initAddress();
		// 调用店铺详细信息的接口
		lists_post()
		// 查询订单有没有查看次数
		lookcs()
	// 判断一下有没有取到值
	const provinceone = uni.getStorageSync('province') || '';
	const cityone = uni.getStorageSync('city')|| '';
	const districtone = uni.getStorageSync('district')|| '';
	if(provinceone!= []&&provinceone!= ''&&cityone!= []&&cityone!= ''&&districtone!= []&&districtone!= ''){
		addressList[0] = provinceone
		addressList[1] = cityone
		addressList[2] = districtone
		user.province = provinceone
		user.city = cityone
		user.county = districtone
	}

		newVideo.value = uni.createVideoContext('newVideo');
		console.log('视频对象1', newVideo.value)
	})
	// 在组件渲染完成后执行
	onMounted(() => {
		console.log('组件已经渲染完毕',);
	});
	let popup_ipone = ref(null)
	let popup = ref(null)
	let paypopup  =ref(null)
	// 关闭遮罩层
	const colse_popup_ipone = ()=>{
		popup_ipone.value.close()
	}
	// 基础值的弹框
	const colse_popup = ()=>{
		popup.value.close()
	}
	const colse_paypopup = ()=>{
		paypopup.value.close()
	}
	// 个人详细信息
	let user = reactive({
		user_id:'',
		openid:'',
		is_myshop:0,
		name:'',
		phone:'',
		channel_no:'',
		province:'',
		city:'',
		county:'',
		qz_shopid:'',
		viptit:'查看详情次数已用完',
	})

	  // 店铺详细信息
	let lists = reactive({
			result: {}
		});
		// 请求店铺详细信息接口
	const lists_post = () =>{
		let params = reactive({
			id : index_item,
			user_id: user.user_id,
			is_myshop: user.is_myshop,
		})
		console.log("params",params)
		onGotApiData('/api/app/shop_transfer/info','GET',params,lists_value)
	}
	// 店铺详细信息请求的结果
	const lists_value = (result) => {
		lists.result = result
		console.log('lists_value请求成功',lists.result)
		goodsData.videos = lists.result.videoUrl
		goodsData.imgList = lists.result.imgs
	}
	// 轮播图相关的变量
	let goodsData = reactive({
		videos: '',
		imgList: [],
	})
	let showVideo = ref(false)
		//操作视频
	const setShowVideo = (isshowVideo, isH5) => {
		console.log("操作视频",isshowVideo,isH5)
			showVideo.value = isshowVideo
			console.log("视频对象", newVideo.value)
			newVideo.value.play()
			// if (isH5 == true) {
			// 	console.log('视频');
			// 	newVideo.value.play()
			// }
			console.log('视频点击播放');
		}
		// 关闭视频
	const hideShow = () =>{
		console.log("关闭视频")
			showVideo.value = false
		}
	// 点击返回首页
	const toindex = () => {
		uni.switchTab({
			url: '/pages/index/index'
		});
	}
	// 点击收藏按钮
	const oncollect = () =>{
		addClick('小程序_店铺详情','收藏')

		let params = reactive({
			sid : lists.result.id,
			user_id: user.user_id,
			type:1,
			method_type : !lists.result.is_collect
		})
		console.log("params",params)
		onGotApiData('/api/app/collect/update','POST',params)
		// 提示成功
		// uni.showToast({
		// 		title: '收藏成功',
		// 		//将值设置为 success 或者直接不用写icon这个参数
		// 		icon: 'success',
		// 		//显示持续时间为 2秒
		// 		duration: 1600
		// 	}) 

		// 请求结束改变图标颜色
		lists.result.is_collect = !lists.result.is_collect
	}
	

	// 店铺地址全部变量以及方法
	const oldAddressList = reactive(areaData)
	const newAddressList = reactive([
		[],
		[],
		[]
	])
	// 最后显示的值
	const addressList = reactive(['北京市', '北京市', '东城区'])
	const tempAddressList = reactive([])
	// 列表中的值
	const multiIndex = reactive([])

		// 取消时候触发的
	const initMultiIndex = () => {
		if (!addressList) {
			multiIndex[0] = 0;
			multiIndex[1] = 0;
			multiIndex[2] = 0;
			return;
		}
		const province = addressList[0];
		const city = addressList[1];
		const area = addressList[2];

		const provinceObj = oldAddressList.find(item => item.label === province);
		const provinceIndex = oldAddressList.findIndex(item => item.label === province);

		console.log(provinceObj)
		const cityObj = provinceObj.children.find(item => item.label === city);
		const cityIndex = provinceObj.children.findIndex(item => item.label === city);

		const areaObj = cityObj.children.find(item => item.label === area);
		const areaIndex = cityObj.children.findIndex(item => item.label === area);

		multiIndex[0] = provinceIndex
		multiIndex[1] = cityIndex
		multiIndex[2] = areaIndex
		console.log(multiIndex)
	}

		// 把js中的数据遍历到这个数组上去
	const initAddress = () => {
		initMultiIndex();

		newAddressList[0] = oldAddressList.map((item, index) => {
			var obj = {
				label: item.label,
				value: item.value
			}
			return obj
		})
		newAddressList[1] = oldAddressList[multiIndex[0]].children.map((item, index) => {
			var obj = {
				label: item.label,
				value: item.value
			}
			return obj
		})
		newAddressList[2] = oldAddressList[multiIndex[0]].children[multiIndex[1]].children.map(
			(item, index) => {
				var obj = {
					label: item.label,
					value: item.value
				}
				return obj
			})

		console.log('newAddressList:', newAddressList);

	}

	// value值改变时候触发
	const pickerChange = (e) => {
		console.log('pickerChange:', e.detail.value);
		const [provinceIndex, cityIndex, areaIndex] = e.detail.value;
		const province = newAddressList[0][provinceIndex].label;
		const city = newAddressList[1][cityIndex].label;
		const area = newAddressList[2][areaIndex].label;
		console.log(province + '-' + city + '-' + area);
		user.province = province
		user.city = city
		user.county = area
		addressList[0] = province
		addressList[1] = city
		addressList[2] = area
	}

	// 某一列值改变时候触发
	const pickerColumnchange = (e) => {
		console.log('pickerColumnchange:', e);
		// 第几列滑动
		// console.log(e.detail.column);
		// 第几列滑动的下标
		// console.log(e.detail.value)
		// 第一列滑动
		if (e.detail.column === 0) {
			multiIndex[0] = e.detail.value;

			newAddressList[1] = oldAddressList[multiIndex[0]].children.map((item,
				index) => {
				// console.log('item:',item);
				var obj = {
					label: item.label,
					value: item.value
				}
				return obj
			})
			multiIndex[1] = 0
			multiIndex[2] = 0;
			newAddressList[2] = oldAddressList[multiIndex[0]].children[multiIndex[1]]
				.children
				.map((item, index) => {
					// console.log('item:',item);
					var obj = {
						label: item.label,
						value: item.value
					}
					return obj
				})

		}
		if (e.detail.column === 1) {
			multiIndex[1] = e.detail.value
			multiIndex[2] = 0;
			newAddressList[2] = oldAddressList[multiIndex[0]].children[multiIndex[1]]
				.children
				.map((item, index) => {
					// console.log('item:',item);
					var obj = {
						label: item.label,
						value: item.value
					}
					return obj
				})
		}
		if (e.detail.column === 2) {
			multiIndex[2] = e.detail.value
		}
	}
	// 取消时候触发
	const pickerCancel = () => {
		// initMultiIndex();
		console.log('我取消了城市选择器')
	}

	// 转让求租的选择值	
	let tan_value = ref(2)
	// 点击切换转让求租
	const tannn = (val)=>{
		tan_value.value  = val 
		console.log("改变的值",tan_value.value)
	}
	// 获取手机的号的弹框api
	const getPhoneNumber = (e) =>{
		console.log('获取手机的code',e.detail.code)  // 动态令牌
		if(e.detail.code){
			if(user.phone){
				// 用户信息美誉手机号的情况
				automaticphone(e.detail.code)
			}else{
				// 用户信息有手机号的情况
				geiautomaticphone(e.detail.code)
			}
		}
		// 关闭弹框
		colse_get_phone()
	}
	// 不绑定手机号
	const automaticphone = (code)=>{
			let params = reactive({
				code:code,
			})	
		onGotApiData('/api/app/xcx/v1/getuserphonenumber',"GET",params,getphone_value)	
	}
	// 绑定手机号
	const geiautomaticphone = (code)=>{
		let params = reactive({
			user_id:user.user_id,
			code:code
		})	
		onGotApiData('/api/app/xcx/v1/getuserphonenumber',"GET",params,getphone_value)	
	}
	// 获取手机号的结果
	const getphone_value= (result)=>{
		console.log("手机号",result.openlink.phoneNumber)
		user.phone = result.openlink.phoneNumber
		// 存起来
		// uni.setStorageSync('phone', result.openlink.phoneNumber) || '';
	}
	// 点击弹框的下一步
const toform = () =>{
		// 关闭弹框
		popup.value.close()
	// 校验手机号是否为空
	// if(user.phone == '' || user.name == ''){
	// 	uni.showToast({
	// 		title:'请完整填写表单',
	// 		icon:'none',
	// 		duration: 1500
	// 	})
	// 	return
	// }
	// const phoneReg = /^1[3456789]\d{9}$/
	// if (!phoneReg.test(user.phone)) {
	// 	uni.showToast({
	// 		title:'请输入正确的手机号',
	// 		icon:'none',
	// 		duration: 1500
	// 	}) // 如果不是有效的手机号码，则删除最后一位数字
	// 	return
	// }
	// // 判断省市区是否选择
	// if(user.province ==''||user.city ==''||user.district==''){
	// 	page_information.province = '北京市'
	// 	page_information.city = '北京市'
	// 	page_information.district = '东城区'
	// }

	//开始请求或者跳转
	// if(tan_value.value === 1){
	// 	// 转让出租、
	// 	let params = reactive({
	// 		name:user.name,
	// 		phone:user.phone,
	// 		user_id:user.user_id,
	// 		province:user.province,
	// 		city:user.city,
	// 		county:user.county,
	// 		channel_no:user.channel_no
	// 	})
	// 	onGotApiData('/api/app/shop_transfer/v1/add_base','POST',params,add_zrbase)
	// }else{
		// 求租的、
		let params = reactive({
			// name:user.name,
			phone:user.phone,
			user_id:user.user_id,
			province:user.province,
			city:user.city,
			county:user.county,
			channel_no:user.channel_no
		})
		onGotApiData('/api/app/shop_rent/v1/add_base','POST',params,add_qzbase)
	}

// }	
//店铺转让返回的结果
const add_zrbase = (result) =>{
	console.log('店铺转让基础返回的结果',result)	
	if(result.code == 401){
		uni.showToast({
			title:'信息提交成功',
			icon:'none',
			duration: 1500
		})
		// 跳转发布页面
		uni.navigateTo({
			url: '/pages/zr_secondary/zr_secondary?shop_id=' + result.data.shop_id 
		});
	}else{
		uni.showToast({
			title:result.message,
			icon:'none',
			duration: 1500
		})
	}
}
// 店铺求租返回的结果
const add_qzbase = (result)=>{
	console.log('店铺求租基础返回的结果',result)
	if(result.code == 401){
		// uni.showToast({
		// 	title:'信息提交成功',
		// 	icon:'none',
		// 	duration: 1500
		// })
		// 先把求租的店铺id存起来然后跳转使用
		user.qz_shopid = result.data.shop_id 
		// 请求产品
		product()
	}else{
		uni.showToast({
			title:result.message,
			icon:'none',
			duration: 1500
		})
	}
} 
// 请求求租产品的接口
let product_value  = reactive({
		// 全部
		required:{},
		// 选中的产品
		default:{},
		// 计算总价格
		allmoney:'',
		dier:{}
	})
const product = () =>{
	let params = reactive({})
	params.channel_no = user.channel_no
	console.log("params",params)
	onGotApiData('/api/app/product/rent/v1/list','GET',params,product_result)
}
// 求租会员页面产品请求的结果
const product_result = (result) => {
	console.log('我是产品结果1',result)
	// 产品请求回来之后，弹框
	paypopup.value.open('bottom')
	product_value.required = result
	// 默认选中第一个	
	product_value.default = result[0]
		// 做判断使用
	product_value.dier = result[1]
	product_value.allmoney = Number(product_value.default.now_money)
	console.log("产品",product_value)
}
// 点击产品选择框事件
const cpdefault = (item) =>{
	addClick("H5会员页",item.product_name)
	product_value.default = item
	console.log("我选中的是",product_value.default)
	product_value.allmoney = Number(product_value.default.now_money)
}
// 点击支付
const pay_qz = () =>{
	let params = reactive({
		product_id:product_value.default.id,
		pay_type:'WX_XCX',
		channel_no:user.channel_no,
		phone:user.phone,
		wxOpenId:user.openid,
		shop_type:tan_value.value,
		shop_id:user.qz_shopid,
	})
	onGotApiData('/api/app/order/rent/v1/create','POST',params,pay_val)
}
// 创键订单返回的值
const pay_val = (result)=>{
	console.log('支付请求结果',result)
		// 唤起微信支付
	requestPayment(result)
}
	// 查询是否有查看次数
const lookcs = () =>{
	let params = reactive({
		user_id:user.user_id,
		type:'view_residue_count',
	})
	onGotApi('/api/app/xcx/v1/vip_check','GET',params,lookcsval)
}
const lookcsval = (result)=>{
	console.log("有无查看权限",result.code)
	if(result.code != 200){
		// 弹框展示出来
		setTimeout(()=>{
			popup.value.open('bottom')
		},3000)

	}
}
	// 点击拨打手机号
	const toipone = () =>{
		// 改变弹框的tit
		user.viptit = '联系方式查看为会员功能'
		addClick('小程序_店铺详情','电话咨询按钮')
		// 调用查询的接口
		lookxq()
	}
	// 请求接口查询会员每天次数
	const lookxq = () =>{
		let params = reactive({
			user_id:user.user_id,
			type:'cw_exch_residue_count',
		})
		onGotApi('/api/app/xcx/v1/vip_check','GET',params,lookxqval)
	}
	const lookxqval = (result)=>{
		console.log("有无查看权限",result.code)
		if(result.code != 200){
			uni.showToast({
					title: '暂无查看权限',
					icon: 'none',
					duration: 2000
				});
			// 弹框填写信息
				popup.value.open('bottom')

		}else{
			// 获取手机号
			ipone_num_post()
		}
	}
		// 获取手机号相关的变量方法
	let ipone_num = ref(null);
	const ipone_num_post = () =>{
		let params = reactive({
			id :  lists.result.id,
			user_id: user.user_id
			
		})
		console.log("params",params)
		onGotApiData('/api/app/shop_transfer/get_phone','GET',params,ipone_num_value)
	}
	// 店铺详细信息请求的结果
	const ipone_num_value = (result) => {
		if(result.code == 401){
			console.log('我是401')
			// 请求产品
			// product()
		}
		else if(result.message){
			uni.showToast({
				title: result.message,
				//将值设置为	 success 或者直接不用写icon这个参数
				icon: 'none',
				//显示持续时间为 2秒
				duration: 2000
			}) 
		}else{
			// 这个是code == 200的情况
		ipone_num.value = result
		console.log('获取到的电话',ipone_num.value)
		// 拨通手机号
			uni.makePhoneCall({
				phoneNumber: ipone_num.value 
			});
		}
	}	
	// 产品的列表
	// let product_lists = ref([])
	// // 选中的产品
	// let product_value  = reactive({
	// 	default:{},
	// 	first:{},
	// 	second:{},
	// })
	// // 请求产品会员的接口
	// const product = () =>{
	// 	let params = reactive({})
	// 	params.channel_no = 'XCX_PPZ_V1',
	// 	// shop_type = shop_type
	// 	params.shop_type = 3
	// 	console.log("params",params)
	// 	onGotApiData('/api/app/product/list_v3','GET',params,product_result)
	// }
	
	// // 会员页面产品请求的结果
	// const product_result = (result) => {
	// 	// 遍历一下，会有json字符串
	// 	result.forEach((value,index,Array)=>{
	// 		if(value.vip_text){
	// 			Array[index].vip_text = JSON.parse(value.vip_text)
	// 			}
	// 		})
	// 	product_lists.value = result
	// 	console.log('我是产品结果',result)
	// 	product_value.first = product_lists.value[0]
	// 	product_value.second =  product_lists.value[1]
	// 	// console.log('我是item',product_value.second.childList)
	// 	// console.log('我选中的产品是', product_value.default)
	// 	// 弹出支付弹框(产品请求与完成)
	// 	popup_ipone.value.open('bottom')
	// }

	// 支付加一个节流
	let paylastClickTime =ref(0)
	// 点击支付
	const pay_throttle = () => {
		
		const currentTime = Date.now();
		console.log("当前时间",currentTime)
		if (currentTime - paylastClickTime.value > 1200) {
		// 执行支付
			pay()
			paylastClickTime.value = currentTime
		} else {
			paylastClickTime.value = currentTime
		}
	}
		// 支付函数
	const pay = () =>{
		addClick("小程序_会员页","确认开通会员按钮")

		console.log("我是openid",user.openid)
		// if(!range_value.value[0]){
		// 	console.log("我没有点击同意")
		// 	uni.showToast({
		// 		title: '请勾选服务协议',
		// 		icon: 'none',
		// 		duration: 2000
		// 	});
		// 	return
		// }
		// 支付时候的id拼接
		// if(product_value.default.id){
		// 		user.product_id = product_value.first.id + ',' + product_value.default.id
		// 	}else{
		// 		user.product_id =  product_value.first.id
		// 	}
		let params = reactive({})
		params.channel_no = 'XCX_PPZ_V1',
		params.product_id = product_value.first.id,
		params.pay_type = 'WX_XCX',
		params.wxOpenId = user.openid,
		params.phone = '',
		params.shop_type = 3,
		params.shop_id = ''
		console.log("params",params)
		onGotApiData('/api/app/order/create_v2','POST',params,pay_result)
	}
		// 点击支付之后的
		const pay_result = (result) => {
		console.log('支付请求结果',result)
		// 唤起微信支付
		requestPayment(result)
	}
		// 唤起支付
		const requestPayment = (result) => {
		// 唤起微信支付
		wx.requestPayment({
			timeStamp: '' + result.timestamp, // 时间戳，自行生成
			nonceStr: '' + result.noncestr, // 随机字符串，自行生成
			package: 'prepay_id=' + result.prepayid, // 统一下单接口返回的prepay_id参数值
			signType: 'MD5', // 签名算法，固定值为MD5
			paySign: '' + result.sign, // 签名，自行生成
			success: function (res) {
			// 支付成功回调
			console.log('支付成功', res);
			uni.showToast({
					title: '支付成功',
					icon: 'none',
					duration: 2000
				});
			// 跳转发布页面
			uni.navigateTo({
				url: '/pages/qz_secondary/qz_secondary?shop_id=' + user.qz_shopid
			});
			return
			},
			fail: function (res) {
			// 支付失败回调
			console.log('支付失败', res);
			uni.showToast({
					title: '支付失败',
					icon: 'none',
					duration: 2000
				});
			}
		});
	}
</script>

<style lang="scss" scoped>
	.out-box{
		min-height: 100vh;
		width: 100vw;
		max-width: 750rpx;
		font-family: '思源黑体';
		overflow: hidden;
		background-color: rgb(236, 235, 235);
		width: 750rpx auto;
		.carousel{
			width: 750rpx;
			// height: 100rpx;
			margin: 0 auto;
			.swiper-item{
				width: 740rpx;
				height: 330rpx;
				.imageone{
					width: 740rpx;
					height: 100%;
					background-size: cover;
				}
			}
		}
		.header{
			width: 750rpx;
			// height: 100rpx;
			margin: 0 auto;
			// margin-top: 10rpx;
			background-color: #fff;
			border-radius: 10rpx;
			.header_title{
				width: 740rpx;
				// height: 100rpx;
				margin: 0 auto;
				padding-top: 30rpx;
				color:#333333 ; 
				font-family: PingFang SC-Medium;
				line-height: 56rpx;
				font-size: 36rpx;
				text-indent:20rpx; 
				font-weight: 600;
				.span1{
					color: #F50909;
				}
			}
			.header_money{
				width: 690rpx;
				height: 50rpx;
				padding-top: 20rpx;
				margin: 0 auto;
				font-size: 38rpx;
				font-family: PingFang SC-Medium;
				font-weight: 600;
				color: #F50909;
				line-height: 47rpx;			
				.span2{
					// color: rgba(255, 87, 51, 1);
					font-size: 26rpx;
				}
			}
			// .header_label{
			// 	width: 740rpx;
			// 	// height: 80rpx;
			// 	display: flex;
			// 	flex-wrap: wrap;
			// 	margin: 2rpx 0 20rpx 0;
			// 	.label_item{
			// 		// width: 110rpx;
			// 		height: 44rpx;
			// 		padding: 0 2rpx 0 2rpx;
			// 		margin: 20rpx 0 0 20rpx;
			// 		// background-color: pink;
			// 		border: 1px solid rgba(255, 141, 26, 1);
			// 		font-size: 24rpx;
			// 		color: rgba(255, 141, 26, 1);
			// 		font-weight: 500;
			// 		line-height: 44rpx;
			// 		text-align: center;
			// 		border-radius: 10rpx;
			// 	}
			// }
			.item_right_identifying{
				width: 720rpx;
				// height: 40rpx;
				margin: 6rpx 0 16rpx 0;
				display: flex;
				flex-wrap: wrap;
				// margin-top: 2rpx;
				// text-overflow: ellipsis;
				// overflow: hidden;
				// white-space: nowrap;
				// border: 1px solid black;
				.item_right_identifying_item{
					// width: 120rpx;
					height: 30rpx;
					font-size: 24rpx;
					font-weight: 400;
					line-height: 30rpx;
					padding: 5rpx 10rpx 5rpx 10rpx;
					// color: rgba(255, 141, 26, 1);
					margin:16rpx 0 0rpx 14rpx;
					text-align: center;
					// border: 1px solid rgba(255, 141, 26, 1);
					border-radius: 12rpx;
					&:nth-child(1) {
						background-color: rgba(249,189,82,0.12);
						color:#F9BD52;
					}
					&:nth-child(2) {
						background-color: rgba(156,126,255,0.12) ;
						color:#9C7EFF ;
					}
					&:nth-child(3) {
						background-color: rgba(63,210,140,0.12);
						color:#3FD28C;
					}
					&:nth-child(4) {
						background-color:rgba(210,63,63,0.12);
						color:#D23F3F;
					}
					&:nth-child(5) {
						background-color:rgba(79,75,255,0.12);
						color:#4F4BFF;
					}
					&:nth-child(6) {
						background-color: rgba(255,0,214,0.12);
						color:#FF00D6 ;
					}
					&:nth-child(7) {
						background-color: rgba(249,189,82,0.12);
						color:#F9BD52;
					}
					&:nth-child(8) {
						background-color: rgba(156,126,255,0.12) ;
						color:#9C7EFF ;
					}
					&:nth-child(9) {
						background-color: rgba(63,210,140,0.12);
						color:#3FD28C;
					}
					&:nth-child(10) {
						background-color:rgba(210,63,63,0.12);
						color:#D23F3F;
					}
					&:nth-child(11) {
						background-color:rgba(79,75,255,0.12);
						color:#4F4BFF;
					}
					&:nth-child(12) {
						background-color: rgba(255,0,214,0.12);
						color:#FF00D6 ;
					}
					&:nth-child(13) {
						background-color: rgba(249,189,82,0.12);
						color:#F9BD52;
					}
					&:nth-child(14) {
						background-color: rgba(156,126,255,0.12) ;
						color:#9C7EFF ;
					}
					&:nth-child(15) {
						background-color: rgba(63,210,140,0.12);
						color:#3FD28C;
					}
					&:nth-child(16) {
						background-color:rgba(210,63,63,0.12);
						color:#D23F3F;
					}
					&:nth-child(17) {
						background-color:rgba(79,75,255,0.12);
						color:#4F4BFF;
					}
					&:nth-child(18) {
						background-color: rgba(255,0,214,0.12);
						color:#FF00D6 ;
					}
					&:nth-child(19) {
						background-color: rgba(249,189,82,0.12);
						color:#F9BD52;
					}
					&:nth-child(20) {
						background-color: rgba(156,126,255,0.12) ;
						color:#9C7EFF ;
					}
					&:nth-child(21) {
						background-color: rgba(63,210,140,0.12);
						color:#3FD28C;
					}
					&:nth-child(22) {
						background-color:rgba(210,63,63,0.12);
						color:#D23F3F;
					}
					&:nth-child(23) {
						background-color:rgba(79,75,255,0.12);
						color:#4F4BFF;
					}
				}
			}
			.header_information{
				width: 720rpx;
				height: 140rpx;
				margin: 0 auto;
				margin-top: 30rpx;
				border-top: 1px solid #F0F0F0;
				border-bottom: 1px solid #f8f8f8;
				// z-index: 100;
				font-family: PingFang SC-Medium, PingFang SC;
				display: flex;
				justify-content:space-between;
				.information_item{
					width: 166rpx;
					height: 94rpx;
					// background-color: pink;
					font-size: 26rpx;
					padding-top: 24rpx;
					// color: rgba(143, 143, 143, 1);
					text-align: center;
					
					.item_top{
						width: 166rpx;
						height: 44rpx;
						// line-height: 38rpx;
						font-weight: 700;
						// background-color: bisque;
						font-size: 26rpx;
						color:#333333;
					}
					.item_bottom{
						width: 166rpx;
						height: 36rpx;
						font-size: 26rpx;
						margin-top: 18rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #666666 ;
						line-height: 30rpx;
						// background-color: rgb(149, 127, 101);
					}
				}
			}
			.information_hr{
				width: 2rpx;
				height: 80rpx;
				margin-top: 10rpx;
				border-left: 1px dashed rgb(213, 212, 212);
			}

			.header_user{
				width: 700rpx;
				// height: 260rpx;
				// border: 1px solid black;
				font-family: PingFang SC-Medium, PingFang SC;
				margin: 0 auto;
				.information_hr{
					width: 700rpx;
					height: 1rpx;
					margin: 0 auto;
					margin-top: 20rpx;
					background-color:#f3f1f1;
				}

				.user_dotu{
					width: 700rpx;
					margin-top: 40rpx;
					// margin: 10rpx 0 0 20rpx;

					font-size: 32rpx;
					font-weight: 600;
					color: #4D4D4D;
					line-height: 38rpx;
					display: flex;
					.user_itemone{
						width: 700rpx;
						.span2{
							// background: #FFFFFF;
							color: #666;
							font-weight: 500;
							font-size: 28rpx
						}
					}
					.user_itemtwo{
						width: 700rpx;
						.span2{
							color: #666;
							font-weight: 500;
							font-size: 28rpx;
						}
					}
					.user_icon{
						width: 110rpx;
						height: 110rpx;
						margin-left: 20rpx;
						// border: 1px solid black;
						position: absolute;
						right: 4rpx;
						.icon_img{
							width: 60rpx;
							height: 60rpx;
							margin: 0 0 0 20rpx;
							// border: 1px solid black;
						}
						.icon_text{
							width: 110rpx;
							height: 30rpx;
							color: rgba(143, 143, 143, 1);
							font-size: 24rpx;
							// border: 1px solid black;
							margin-top: -16rpx;
						}
					}
				}
				.user_dotuone{
					width: 700rpx;
					.user_itemtwo{
						width: 700rpx;
						margin-top: 40rpx;
						// margin: 10rpx 0 0 20rpx;
						font-size: 32rpx;
						font-weight: 600;
						color: #4D4D4D;
						line-height: 38rpx;
					}
					.span2{
						width: 680rpx;
						margin: 0 auto;
						margin-top: 20rpx;
						color: #666;
						font-weight: 500;
						font-size: 28rpx;
						line-height: 44rpx;
					}
				}
				.user_item{
					width: 700rpx;
					height: 44rpx;
					font-size: 32rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 600;
					color: #4D4D4D;
					line-height: 38rpx;
					margin: 30rpx 0 10rpx 0;
					// background-color: pink;
					.span2{
						color: #666666;
						font-weight: 500;
						font-size: 28rpx;
					}
				}
			}
		// 下方是访问量展示
			.visits_title{
				width: 750rpx;
				height: 90rpx;
				margin-top: 40rpx;
				background-color:#FFF7F7;
				display: flex;
				.visits_title_left{
					width: 6rpx;
					height: 30rpx;
					background: #F50909;
					margin: 30rpx 0 0 20rpx;
				}
				.visits_title_right{
					width: 500rpx;
					height: 90rpx;
					line-height: 90rpx;
					margin: 0  0 0 14rpx;
					font-size: 36rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 600;
					color: #333333;
				}
			}
			.visits{
				width: 706rpx;
				height: 140rpx;
				margin: 0 auto;
				margin-top: 20rpx;
				border-radius: 10rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				background-color: #FFFFFF;
				display: flex;
				justify-content:space-between;

				.information_item{
					width: 220rpx;
					height: 140rpx;
					// background-color: pink;
					font-size: 26rpx;
					padding-top: 22rpx;
					color: #666666;
					text-align: center;
	
					.item_top{
						width: 220rpx;
						height: 50rpx;
						font-size: 44rpx;
						font-weight: 600;
						color: #F50909;
						line-height: 50rpx;
					}
					.item_bottom{
						width: 220rpx;
						height: 44rpx;
						margin-top: 16rpx;
						font-weight: 500;
					}
				}
			}
			.header_warn{
				width: 740rpx;
				height: 80rpx;
				text-align: center;
				line-height: 80rpx;
				font-size: 20rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #F50909;
			}
		} 
		.mian{
			width: 740rpx;
			height: 100rpx;
			margin: 0 auto;
			margin-bottom: 120rpx;
			font-size: 24rpx;
			line-height: 100rpx;
			text-align: center;
			color: #666666;
			font-size: 20rpx;
			font-family: PingFang SC-Regular, PingFang SC;
		}
		.bottom{
			width: 100%;
			height: 120rpx;
			position: fixed;
			bottom: 0;
			background-color: #fff;
			.bottom_main{
				width: 740rpx;
				height: 100rpx;
				display: flex;
				justify-content: space-around;
				// .mian_left{
				// 	width: 100rpx;
				// 	height: 100rpx;
				// 	margin: 10rpx 0 0 60rpx;
				// 	.left_top{
				// 	width: 60rpx;
				// 	height: 54rpx;
				// 	background: url(../../static/images/首页-选中.png) no-repeat;
				// 	background-size: 100% 100%;
				// 	}
				// 	.left_bottom{
				// 		width: 60rpx;
				// 		height: 30rpx;
				// 		font-size: 24rpx;
				// 		text-align: center;
				// 	}
				// }
				// .main_center{
				// 	width: 100rpx;
				// 	height: 100rpx;
				// 	margin: 10rpx 0 0 60rpx;
				// 	.center_top{
				// 		width: 54rpx;
				// 		height: 54rpx;
				// 		margin-left: 4rpx;
				// 		background: url(../../static/images/收藏.png) no-repeat;
				// 		background-size: 100% 100%;
				// 	}
				// 	.center_topclick{
				// 		background: url(../../static/images/收藏1.png) no-repeat;
				// 		background-size: 100% 100%;
				// 	}
				// 	.center_bottom{
				// 		width: 60rpx;
				// 		height: 30rpx;
				// 		font-size: 24rpx;
				// 		text-align: center;
				// 	}
				// }

				.release{
					width: 340rpx;
					height: 90rpx;
					// margin-right: 10rpsx;
					margin: 15rpx 0 0 0rpx;
					background-color: #F50909;
					border-radius: 50rpx;
					text-align:center;
					color: #fff;
					line-height: 90rpx;
					// padding-left: 60rpx;
					font-weight: 400;
					// margin-top: 10rpx;
				}
				.main_right{
					width: 340rpx;
					height: 90rpx;
					// margin-right: 10rpsx;
					text-align: center;
					margin: 15rpx 0 0 0rpx;
					background-color: #F0EDED;
					border-radius: 50rpx;
					color: rgba(56, 56, 56, 1);
					line-height: 90rpx;
					// padding-left: 60rpx;
					// font-weight: 400;
					// .right_i{
					// 	margin-right: 20rpx;
					// }
				}
			}
		}
		.bottom{
			width: 100%;
			height: 100rpx;
			position: fixed;
			bottom: 0;
			background-color: #fff;
			.bottom_main{
				width: 740rpx;
				height: 100rpx;
				display: flex;
				justify-content: space-between;
				.mian_left{
					width: 100rpx;
					height: 100rpx;
					margin: 10rpx 0 0 60rpx;
					.left_top{
					width: 60rpx;
					height: 54rpx;
					background: url(../../static/images/首页-选中.png) no-repeat;
					background-size: 100% 100%;
					}
					.left_bottom{
						width: 60rpx;
						height: 30rpx;
						font-size: 24rpx;
						text-align: center;
					}
				}
				.main_center{
					width: 100rpx;
					height: 100rpx;
					margin: 10rpx 0 0 60rpx;
					.center_top{
						width: 54rpx;
						height: 54rpx;
						margin-left: 4rpx;
						background: url(../../static/images/收藏.png) no-repeat;
						background-size: 100% 100%;
					}
					.center_topclick{
						background: url(../../static/images/收藏1.png) no-repeat;
						background-size: 100% 100%;
					}
					.center_bottom{
						width: 60rpx;
						height: 30rpx;
						font-size: 24rpx;
						text-align: center;
					}
				}
				.main_right{
					width: 280rpx;
					height: 90rpx;
					// margin-right: 10rpsx;
					margin: 5rpx 0 0 70rpx;
					background-color: rgba(255, 87, 51, 1);
					border-radius: 10rpx;
					display: flex;
					color: #fff;
					line-height: 90rpx;
					padding-left: 60rpx;
					font-weight: 400;
					.right_i{
						margin-right: 20rpx;
					}
				}
			}
		}
	}
	// 轮播图相关的穿透
	:deep(.out-box .carousel){
		height: 300rpx; 
	}
	:deep(.uni-swiper__warp .uni-swiper){
		height: 300rpx; 
	}
		/* 预览视频弹窗 */
	.mask {
		width: 100%;
		height: 100vh;
		position: fixed;
		top: 0;
		left: 0;
		background-color: rgba(0, 0, 0, .8);
		z-index: 200;
	}

	.previewvideo {
		width: 100vw;
		height: 100vw;
		position: fixed;
		top: 50%;
		left: 0;
		transform: translateY(-50%);
		background-color: #000;
		z-index: 900;
		opacity: 1;
	}

	.close {
		display: flex;
		align-content: center;
		align-items: flex-end;
		position: absolute;
		top: 140rpx;
		right: 20rpx;
		z-index: 900;

		image {
			width: 50rpx;
			height: 50rpx;
			display: block;
			justify-content: center;
			margin-left: 30rpx;
			margin-bottom: 20rpx;
			border-radius: 50%;
			padding: 10rpx;
			background-color: rgba(0, 0, 0, 0.2);
		}
	}

	.videos {
		height: 100vw;
		width: 100vw;
		z-index: 10;
		position: relative;

		video {
			width: 100%;
			height: 100%;
		}
	}
	.nowvideos {
		width: 100%;
		height: 100%;
		margin: 0 auto;
	}
	:deep(.carousel .swiper){
		height: 55vw;
	}
	:deep(.image-wrapper .loaded){
		height: 55vw;
	}
	// 基础信息弹框的样式
	.popupipone{
		width: 750rpx;
		height: 106 0rpx;
		border: 1px solid rgba(255, 236, 223, 1);
		background: linear-gradient(180deg, rgba(255, 236, 223, 1) 0%, rgba(255, 246, 240, 1) 100%);
		// border-radius: 20rpx;
		font-family: '思源黑体';
		// background-color: pink;
		border-top-right-radius: 30rpx;
		border-top-left-radius: 30rpx;
		position: relative;
		// bottom: -54rpx;
		.image{
			width: 260rpx;
			height: 260rpx;
			// border: 1px solid black;
			// background: url(../../static/images/book.png) no-repeat;
			// background-size: 100% 100%;
			position: absolute;
			top: -120rpx;
		}
		.popupipone_imgtwo{
			width: 48rpx;
			height: 48rpx;
			border-radius: 40rpx;
			background: url(../../static/images/chacha.png) no-repeat;
			background-size: 100% 100%;
			position: absolute;
			left: 666rpx;
			top: 20rpx;
		}
		.tk_one{
			width: 600rpx;
			height: 180rpx;
			// background-color: pink;
			margin: 0 auto;
			margin-top: 60rpx;
			.title_one{
				width: 600rpx;
				height: 100rpx;
				font-size: 44rpx;
				// border: 1px solid black;
				font-weight: 700;
				line-height: 50px;
				color: rgba(0, 0, 0, 1);
				text-align: center;

			}
			.title_two{
				width: 600rpx;
				height: 140rpx;
				font-size: 26rpx;
				font-weight: 300;
				color: rgba(128, 128, 128, 1);
			}
		}
		.hr{
			width: 680rpx;
			height: 10rpx;
			margin: 0 auto;
			border-bottom: 1px solid rgb(210, 208, 207);
		}
		.radio{
			width:700rpx;
			height: 100rpx;
			// border: 1px solid black;
			margin: 0 auto;
			display: flex;
			justify-content: space-around;
			.radio_item{
				width: 330rpx;
				height: 100rpx;
				background-color: rgb(236, 236, 236);
				border: 1px solid rgb(255, 246, 238);
				border-radius: 10rpx;
				display: flex;
				.item_left{
					width: 230rpx;
					height: 100rpx;
					margin-left: 20rpx;
					// border: 1px solid black;
					.text_top{
						width: 200rpx;
						height: 60rpx;
						font-size: 32rpx;
						font-weight: 700;
						letter-spacing: 0px;
						line-height: 65rpx;
						color: rgba(0, 0, 0, 1);
						text-align: left;
						vertical-align: top;
					}
					.text_bottom{
						width: 200rpx;
						height: 40rpx;
						font-size: 22rpx;
						line-height: 35rpx;
						color: rgba(0, 0, 0, 1);

					}
				}
				.item_right{
					width: 60rpx;
					height: 60rpx;
					margin-top: 20rpx;
					// background: url(../../static/images/cz.png) no-repeat;
					background-size: 100% 100%;
				}
			}
			.active{
				background-color: rgba(255, 224, 201, 1);
				border: 1px solid rgba(255, 87, 51, 1);
				.item_left{
					color: rgba(255, 87, 51, 1);
					.text_top{
						color: rgba(255, 87, 51, 1);
					}
					.text_bottom{
						color: rgba(255, 87, 51, 1);
					}
				}
			}
		}
		.title_name{
			width: 680rpx;
			height: 80rpx;
			margin:  0 auto;
			margin-top: 10rpx;
			font-size: 32rpx;
			font-weight: 700;
			line-height: 80rpx;
			color: rgba(0, 0, 0, 1);
			// border: 1px solid black;
		}
		.input_one{
			width: 660rpx;
			height: 80rpx;
			padding-left: 20rpx;
			// border: 1px solid black;
			margin: 0 auto;
			border-radius: 16rpx;
			background-color: rgba(255, 229, 209, 1);
		}
		.input_two{
			width: 660rpx;
			height: 80rpx;
			padding-left: 20rpx;
			// border: 1px solid black;
			margin: 0 auto;
			border-radius: 16rpx;
			background-color: rgba(255, 229, 209, 1);
		}
		.getphone{
			width: 680rpx;
			height: 80rpx;
			margin: 0 auto;
			border-radius: 16rpx;
			background-color: rgba(255, 229, 209, 1);
			display: flex;
			position: relative;
			.input_twoo{
				width: 430rpx;
				height: 80rpx;
				// border: 1px solid black;
				margin: 0 auto;
				background-color: rgba(255, 229, 209, 1);
				position: absolute;
				top: 0;
				left: 20rpx;
			}
			.logon{
				width: 180rpx;
				height: 78rpx;
				// border-radius: 0;
				background-color: rgba(255, 229, 209, 1);
				border:1px solid rgb(255, 151, 132);
				font-size: 24rpx;
				line-height: 78rpx;
				color:rgba(255, 87, 51, 1) ;
				position: absolute;
				top: 0;
				left: 470rpx;
			}
		}
		.region{
			width: 660rpx;
			height: 80rpx;
			background-color: rgba(255, 229, 209, 1);
			margin: 0 auto;
			padding-left: 20rpx;
			border-radius: 16rpx;
			display: flex;
			.address_i{
				width: 48rpx;
				height: 48rpx;
				margin: 16rpx 10rpx 0 0;
				// background-color: pink;
				background: url(../../static/images/位置.png);
				background-size: 100%;
				
			}
			.Address-item{
				width: 500rpx;
				height: 80rpx;
				line-height: 80rpx;
				// border: 1px solid black;
				font-size: 28rpx;
				color: rgba(0, 0, 0, 1);
			}
			.address_ii{
				width: 40rpx;
				height: 40rpx;
				background:url(../../static/images/向下.png);
				background-size: 100%;
				margin: 20rpx 0 0 0;
			}
		}

		.tijiao{
			width: 600rpx;
			height: 90rpx;
			margin:  0 auto;
			margin-top: 30rpx;
			// border: 1px solid black;
			background-color: rgba(255, 87, 51, 1);
			border-radius: 50rpx;
			font-size: 40rpx;
			font-weight: 400;
			line-height: 90rpx;
			color: rgba(255, 255, 255, 1);
			text-align: center;
		}
	}
		// 基础信息弹框
	.popupbase{
		width: 750rpx;
		height: 650rpx;
		background: linear-gradient(224.09deg, rgba(255, 222, 246, 1) 0%, rgba(255, 250, 233, 1) 50.02%, rgba(255, 255, 255, 1) 100%);
		border-top-right-radius: 20rpx;
		border-top-left-radius: 20rpx;
		position: relative;
		.icon{
			width: 300rpx;
			height: 300rpx;
			position: absolute;
			top: -140rpx;
			left: 220rpx;
		}
		.cha{
			width: 58rpx;
			height: 58rpx;
			border-radius: 40rpx;
			background: url(../../static/images/chacha.png) no-repeat;
			background-size: 100% 100%;
			position: absolute;
			left: 666rpx;
			top: 20rpx;
		}
		.tit1{
			width: 650rpx;
			height: 150rpx;
			// border: 1px solid black;
			position: absolute;
			top: 140rpx;
			left: 50rpx;
			.titone{
				width: 650rpx;
				height: 80rpx;
				font-size: 46rpx;
				font-weight: 700;
				line-height: 80rpx;
				color: rgba(0, 0, 0, 1);
				text-align: center;
			}
			.tittwo{
				width: 650rpx;
				height: 50rpx;
				font-size: 30rpx;
				line-height: 50rpx;
				color: rgba(128, 128, 128, 1);
				text-align: center;
			}
		}
		.quanyi{
			width: 720rpx;
			// border: 1px solid black;
			position: absolute;
			top: 300rpx;
			left: 40rpx;
			display: flex;
			.item{
				width: 148rpx;
				height: 200rpx;
				margin: 12rpx;
				// border: 1px solid black;
				.icon_bag{
					width: 100rpx;
					height: 100rpx;
					margin: 0 auto;
					border-radius: 16rpx;
					background-color:rgba(250, 225, 220, 1);
					position: relative;
					.icon{
						width: 70rpx;
						height: 70rpx;
						position: absolute;
						top: 15rpx;
						left: 15rpx;
					}
				}
				.bigtit{
					width: 148rpx;
					height: 40rpx;
					font-size: 14px;
					font-weight: 700;
					margin-top: 8rpx;
					letter-spacing: 1px;
					line-height: 20.27px;
					color: rgba(0, 0, 0, 1);
					text-align: center;
					vertical-align: top;
				}
				.tit{
					width: 158rpx;
					height: 20rpx;
					font-size: 22rpx;
					font-weight: 400;
					margin-top: 4rpx;
					line-height: 30rpx;
					color: rgba(0, 0, 0, 1);
					text-align: center;

				}
			}
		}
		.buttom{
			width: 600rpx;
			height: 90rpx;
			background-color: rgba(254, 133, 13, 1);
			position: absolute;
			top: 540rpx;
			left: 70rpx;
			border-radius: 50rpx;
			font-size: 44rpx;
			line-height: 90rpx;
			color: rgba(255, 255, 255, 1);
			text-align: center;
		}
	}
	// 弹出层的样式
	.popupipone_center{
		width: 750rpx;
		margin: 0 auto;
		border-radius: 30rpx 30rpx 0px 0px;
		background: linear-gradient(90deg, rgba(250, 244, 230, 1) 0%, rgba(242, 226, 196, 1) 100%);
		.porop_tit{
			width: 750rpx;
			height: 70rpx;
			padding: 26rpx 0 0 0;
			display: flex;
			.porop_tit_left{
				width: 600rpx;
				height: 70rpx;
				margin-left: 30rpx;
				font-size: 34rpx;
				font-weight: 600;
				line-height: 60rpx;
				color: rgba(255, 141, 26, 1);
			}
			.porop_tit_right{
				width: 60rpx;
				height: 70rpx;
				margin-left: 50rpx;
				background: url(../../static/images/7.png) no-repeat;
			}	
		}
		.prop_center{
			width: 710rpx;
			height: 150rpx;
			margin: 0 auto;
			margin-top: 30rpx;
			border-radius: 20rpx;
			background: rgba(255, 255, 255, 1);
			.prop_center_top{
				width: 750rpx;
				height: 150rpx;
				padding-top: 10rpx;
				border-bottom: 2rpx solid rgba(229, 229, 229, 1);
				.center_top{
					padding-left: 20rpx;
					display: flex;
					.center_left{
						width: 500rpx;
						height: 70rpx;
						font-size:32rpx;
						font-weight: 600;
						line-height: 70rpx;
						color: rgba(0, 0, 0, 1);
					}
					.center_right{
						width: 180rpx;
						height: 70rpx;
						margin-left: 50rpx;
						font-size: 36rpx;
						font-weight: 700;
						line-height: 70rpx;
						color: rgba(255, 87, 51, 1);
						.spanone{
							font-size: 26rpx;
							font-weight: 400;
							color: rgba(255, 87, 51, 1);
						}
					}
				}
				.center_butt{
					padding:10rpx 0 0 20rpx;
					display: flex;
					.butt_left{
						width: 280rpx;
						height: 40rpx;
						font-size: 24rpx;
						font-weight: 400;
						// line-height: 60rpx;
						color: rgba(128, 128, 128, 1);
						display: flex;
						.butt_left_text{
							line-height: 40rpx;
							border-radius: 4px;
							border: 1px solid rgba(245, 130, 15, 1);
							padding: 0 6rpx 0 6rpx;
							// text-align: center;
							font-size: 12px;
							color: rgba(245, 130, 15, 1);
						}
					}
					.butt_right{
						margin-left: 1rpx;
					}
				}
			}
			.propu_title{
				width: 600rpx;
				height: 50rpx;
				margin: 0 auto;
				margin-top: 60rpx;
				// border: 1px solid black;
				font-size: 24rpx;
				font-weight: 400;
				line-height: 50rpx;
				color: rgb(131, 127, 123);
				text-align: center;

			}
		}
		.prop_bottom{
			width: 750rpx;
			height: 180rpx;
			border: 1rpx solid rgba(242, 226, 196, 1);
			.buttom_btn{
				width: 620rpx;
				height: 90rpx;
				margin: 0 auto;
				margin-top: 60rpx;
				// margin-bottom: 20rpx;
				border-radius: 14rpx;
				background: rgba(255, 87, 51, 1);
				font-size: 32rpx;
				font-weight: 700;
				text-align: center;
				line-height: 90rpx;
				color: rgba(255, 255, 255, 1);

			}
		}
	}
	// 求租的支付弹框
	.popuppay{
		width: 750rpx;
		background-color: rgba(255, 255, 255, 1);
		border-top-right-radius: 20rpx;
		border-top-left-radius: 20rpx;
		margin-bottom: 100rpx;
		position: relative;
		.popuppay_imgtwo{
			width: 48rpx;
			height: 48rpx;
			border-radius: 40rpx;
			background: url(../../static/images/chacha.png) no-repeat;
			background-size: 100% 100%;
			position: absolute;
			left: 666rpx;
			top: 20rpx;

		}
		.main_one{
				width: 750rpx;
				height: 100rpx;
				// border: 1px solid black;
				display: flex;
				.black{
					width: 6rpx;
					height: 30rpx;
					background-color: rgb(241, 17, 17);
					border-radius: 4prx;
					margin: 40rpx 0 0 20rpx;
				}
				.black_tit{
					width: 500rpx;
					height: 50rpx;
					margin: 30rpx 0 0 10rpx;
					font-size: 32rpx;
					font-weight: 600;
					line-height: 50rpx;
					color: rgba(0, 0, 0, 1);
				}
			}
		.check{
			width: 750rpx;
			height: 90rpx;
			// border: 1px solid black;
			display: flex;
			justify-content: space-around;
			.item{
				width: 340rpx;
				height: 90rpx;
				box-shadow: 4px 4px 14px 2px rgba(0, 0, 0, 0.25);
				border-radius: 10rpx;
				border: 1px solid #fff;
				position: relative;
				display: flex;
				.tit{
					width: 190rpx;
					height: 90rpx;
					font-size: 30rpx;
					font-weight: 400;
					line-height: 90rpx;
					color: rgba(245, 164, 71, 1);
					text-align: center;

				}
				.money{
					width: 130rpx;
					height: 90rpx;
					font-size: 38rpx;
					font-weight: 900;
					line-height: 90rpx;
					color: rgba(56, 56, 56, 1);
					text-align: center;
				}
				.jiaobiao{
					width: 36rpx;
					height: 36rpx;
					// border: 1px solid black;
					background:url(../../static/images/jiaobiao.png);
					background-size: 100%;
					position: absolute;
					top: 54rpx;
					left: 304rpx;

				}
			}
			.active{
				border: 1px solid rgba(255, 87, 51, 1);
				background: linear-gradient(90deg, rgba(251, 225, 190, 1) 0%, rgba(252, 217, 217, 0.22) 100%);
				.money{
						color:rgba(255, 87, 51, 1);
				}
			}
			// 选中之后展示的图标

		}
		.quanyi{
			width: 720rpx;
			margin: 0 auto;
			display: flex;
			flex-wrap: wrap;
			.item{
				width: 148rpx;
				height: 200rpx;
				margin: 12rpx;
				// border: 1px solid black;
				.icon_bag{
					width: 100rpx;
					height: 100rpx;
					margin: 0 auto;
					border-radius: 16rpx;
					background-color:rgba(250, 225, 220, 1);
					.icon{
						width: 70rpx;
						height: 70rpx;
						margin: 15rpx;
					}
				}
				.bigtit{
					width: 148rpx;
					height: 40rpx;
					font-size: 14px;
					font-weight: 700;
					margin-top: 8rpx;
					letter-spacing: 1px;
					line-height: 20.27px;
					color: rgba(0, 0, 0, 1);
					text-align: center;
					vertical-align: top;
				}
				.tit{
					width: 158rpx;
					height: 20rpx;
					font-size: 22rpx;
					font-weight: 400;
					margin-top: 4rpx;
					line-height: 30rpx;
					color: rgba(0, 0, 0, 1);
					text-align: center;

				}
			}
		}
		.bottom{
			width: 750rpx;
			height: 100rpx;
			border-top: 1px solid rgb(167, 164, 164);
			display: flex;
			.bottom_one{
				width: 450rpx;
				height: 100rpx;
				// border: 1px solid black;
				color: rgba(255, 87, 51, 1);
				text-align: center;
				line-height: 100rpx;
				font-size: 26rpx;
			}
			.bottom_two{
				width: 300rpx;
				height: 100rpx;
				background-color: #F50909;
				color: #fff;
				text-align: center;
				line-height: 100rpx;
				font-size: 30rpx;
			}
		}
	}
</style>
